<template>
  
  <div class="editor-app">
    <m-editor v-model="value" ref="editor" :menu="menu" :runtime-url="runtimeUrl" :props-configs="propsConfigs"
      :props-values="propsValues" :event-method-list="eventMethodList" :component-group-list="componentGroupList"
      :default-selected="defaultSelected" :moveable-options="moveableOptions" :auto-scroll-into-view="true"
      :stage-rect="stageRect">
      <template #workspace-content>
        <DeviceGroup v-model="stageRect"></DeviceGroup>
      </template>
    </m-editor>

    <el-dialog v-model="previewVisible" destroy-on-close custom-class="pre-viewer" title="预览"
      :width="stageRect && stageRect.width">
      <iframe v-if="previewVisible" width="100%" :height="stageRect && stageRect.height" :src="previewUrl"></iframe>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, toRaw } from 'vue';
import { useRouter } from 'vue-router';
import { Coin, Connection, Document } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import serialize from 'serialize-javascript';

import type { MenuBarData, MoveableOptions, TMagicEditor } from '@tmagic/editor';
import type { Id } from '@tmagic/schema';
import { NodeType } from '@tmagic/schema';
import StageCore from '@tmagic/stage';
import { asyncLoadJs } from '@tmagic/utils';

import DeviceGroup from '../components/DeviceGroup.vue';
// 组件列表
import componentGroupList from '../configs/componentGroupList';
import dsl from '../configs/dsl';
// import { log } from 'console';

const { VITE_RUNTIME_PATH, VITE_ENTRY_PATH } = import.meta.env;

const runtimeUrl = `${VITE_RUNTIME_PATH}/playground/index.html`;
const router = useRouter();
const editor = ref<InstanceType<typeof TMagicEditor>>();
const previewVisible = ref(false);
console.log(dsl);

// const value = ref(dsl);
const value = ref({
  type: 'app',
  items: [],
});
const defaultSelected = ref(dsl.items[0].id);
const propsValues = ref<Record<string, any>>({});
const propsConfigs = ref<Record<string, any>>({});
const eventMethodList = ref<Record<string, any>>({});
const stageRect = ref({
  width: 375,
  height: 817,
});

const previewUrl = computed(
  () => `${VITE_RUNTIME_PATH}/page/index.html?localPreview=1&page=${editor.value?.editorService.get('page').id}`,
);
console.log(previewUrl, 3446);

const menu: MenuBarData = {
  left: [
    {
      type: 'text',
      text: 'H5编辑器',
    },
  ],
  center: ['delete', 'undo', 'redo', 'guides', 'rule', 'zoom'],
  right: [
    // {
    //   type: 'button',
    //   text: 'Form Playground',
    //   handler: () => router.push('form'),
    // },
    // {
    //   type: 'button',
    //   text: 'Table Playground',
    //   handler: () => router.push('table'),
    // },
    '/',
    {
      type: 'button',
      text: '预览',
      icon: Connection,
      handler: async (services) => {
        if (services?.editorService.get<Map<Id, Id>>('modifiedNodeIds').size > 0) {
          try {
            await ElMessageBox.confirm('有修改未保存，是否先保存再预览', '提示', {
              confirmButtonText: '保存并预览',
              cancelButtonText: '预览',
              type: 'warning',
            });
            save();
            ElMessage.success('保存成功');
          } catch (e) {
            console.error(e);
          }
        }
        previewVisible.value = true;
      },
    },
    {
      type: 'button',
      text: '保存',
      icon: Coin,
      handler: () => {
        save();
        ElMessage.success('保存成功');
      },
    },
    '/',
    {
      type: 'button',
      icon: Document,
      tooltip: '源码',
      handler: (service) => service?.uiService.set('showSrc', !service?.uiService.get('showSrc')),
    },
  ],
};

const moveableOptions = (core?: StageCore): MoveableOptions => {
  const options: MoveableOptions = {};
  const id = core?.dr?.target?.id;

  if (!id || !editor.value) return options;

  const node = editor.value.editorService.getNodeById(id);

  if (!node) return options;

  const isPage = node.type === NodeType.PAGE;

  options.draggable = !isPage;
  options.resizable = !isPage;
  options.rotatable = !isPage;

  return options;
};

const save = () => {
  console.log(editor.value?.modelValue.items);

  const res = serialize(toRaw(value.value), {
    space: 2,
    unsafe: true,
  }).replace(/"(\w+)":\s/g, '$1: ')

  localStorage.setItem(
    'magicDSL', res,
  );
  editor.value?.editorService.resetModifiedNodeId();
};
// 组件的属性配置表单的
asyncLoadJs(`${VITE_ENTRY_PATH}/config/index.umd.js`).then(() => {
  propsConfigs.value = (globalThis as any).magicPresetConfigs;
  console.log(propsConfigs.value, "propsConfigs");

});
//添加组件时的默认值
asyncLoadJs(`${VITE_ENTRY_PATH}/value/index.umd.js`).then(() => {
  propsValues.value = (globalThis as any).magicPresetValues;
  console.log(propsValues.value, "propsValues");

});

asyncLoadJs(`${VITE_ENTRY_PATH}/event/index.umd.js`).then(() => {
  eventMethodList.value = (globalThis as any).magicPresetEvents;
  console.log(eventMethodList.value, "eventMethodList");

});


// save();
</script>

<style lang="scss">
html {
  overflow: hidden;
}

#app {
  width: 100%;
  height: 100%;
  display: flex;
}

.editor-app {
  width: 100%;
  height: 100%;

  .m-editor {
    flex: 1;
    height: 100%;
  }

  .el-overlay-dialog {
    display: flex;
  }

  .pre-viewer {
    margin: auto;

    .el-dialog__body {
      padding: 0;
    }
  }

  .menu-left {
    .menu-item-text {
      margin-left: 10px;
    }
  }
}
</style>
